import React, { PureComponent } from 'react';
import { BorderBox13,BorderBox1 } from '@jiaminghi/data-view-react';
import BrowseCategories from './charts/BrowseCategories';
import UserIdentityCategory from './charts/UserIdentityCategory';
import UserSituation from './charts/UserSituation';
import OfflinePortal from './charts/OfflinePortal';
import Feedback from './charts/Feedback';
import { salesGoodsTop,salesStoreTop,realTimeSales } from '../../services/index';
import { ModuleTitle } from '../../style/globalStyledSet';
import { connect } from 'dva';
import {
  RightPage,
  RightTopBox,
  RightCenterBox,
  RightBottomBox,
} from './style';

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      saleTopList:{},
      goodTopList:{},
      userSitua:{},
      topType:1,
      topType1:1,
    };
  }
  
  componentDidMount(){
    this.props.onRef(this)
    this.getSalesGoodsTop(); 
    this.getSalesStoreTop(); 
    this.getRealTimeSales();
    setInterval(()=>{
      this.getRealTimeSales();
    },60000*5) 
  }
  async getSalesGoodsTop(id){
    let params={}
    if(id){params.storeId=id}
    let res = await salesGoodsTop(params); 
    if(!res){return}
    this.setState({
      goodTopList:{data:res.result}
    })
  }
  async getSalesStoreTop(){
    let res = await salesStoreTop(); 
    if(!res){return}
    this.setState({
      saleTopList:{data:res.result}
    })
  }
  async setTopType(type){
    if(this.state.topType==type) return;
    let res = await salesStoreTop({ topType:type}); 
    if(!res){return}
    this.setState({
      topType:type,
      saleTopList:{data:res.result}
    }) 
  }
  async setTopType1(type){
    if(this.state.topType1==type) return;
    let res = await salesGoodsTop({ topType:type}); 
    if(!res){return}
    this.setState({
      topType1:type,
      goodTopList:{data:res.result}
    }) 
  }
  
  async getRealTimeSales(id){
    let params={}
    if(id){params.storeId=id}
    let res = await realTimeSales(params); 
    if(!res){return}
    let arr=res.result.map(item=>{
      return [item.storeName+ '于'+item.orderDate+"售出"+item.goodsList+ item.goodsTotalNumber +'份']
    }) 
    let userSitua = {  
      data:arr,
    }
    this.setState({
      userSitua
    })
  }
  render() {
    const { goodTopList ,saleTopList, userSitua,topType,topType1 } = this.state;
    return (
      <RightPage>
        <RightTopBox>
          {/* <div className='right-top'>
            <ModuleTitle>
              <i className='iconfont'>&#xe7f7;</i>
              <span>关联数据类别分布</span>
            </ModuleTitle>
            <div className='right-top-content'>
              <BrowseCategories
                browseCategories={browseCategories}></BrowseCategories>
              <img
                alt='地球'
                className='earth-gif'
                src={require('../../assets/images/earth-rotate.gif')}
              />
            </div>
          </div> */}
          <RightCenterBox>
            <div className='title-box'>
              <ModuleTitle>
                <i className='iconfont'>&#xe7fd;</i>
                <span>店铺销售排行</span>
              </ModuleTitle> 
              <div className={`week-class  ${topType==2?"active":''}`} onClick={() => this.setTopType("2")}>近一周</div>  
              <div className={`week-class  ${topType==1?"active":''}`} onClick={() => this.setTopType("1")}>近一月</div> 
            </div>
           
            <UserIdentityCategory
              userIdentityCategory={saleTopList}></UserIdentityCategory>
          </RightCenterBox>
        </RightTopBox>

        <RightCenterBox> 
          <div className='title-box'>
            <ModuleTitle>
              <i className='iconfont'>&#xe7fd;</i>
              <span>商品销售排行</span>
            </ModuleTitle>
            <div className={`week-class  ${ topType1==2 ? "active" : ''}` } onClick={() => this.setTopType1("2")}>近一周</div>  
            <div className={`week-class  ${ topType1==1 ? "active" : ''}` } onClick={() => this.setTopType1("1")}>近一月</div> 
          </div>

          <UserIdentityCategory userIdentityCategory={goodTopList}></UserIdentityCategory>
        </RightCenterBox>

        <RightBottomBox>
          <BorderBox13 className='right-bottom-borderBox13'>
            <div className='right-bottom'>
              {/* <ModuleTitle>
                <i className='iconfont'>&#xe790;</i>
                <span>今日流水</span>
              </ModuleTitle>  */}
              <div className>

              </div>
              <UserSituation userSitua={userSitua}></UserSituation>
              {/* <div className='feedback-box'>
                {offline
                  ? offline.feedback.map((item, index) => {
                      return (
                        <div className='feedback-box-item' key={index}>
                          <Feedback FeedbackData={item}></Feedback>
                          <span className='dis-text'>{item.title}</span>
                        </div>
                      );
                    })
                  : ''}
              </div> */}
              {/* 门店 */}
              {/* <div className='offline-portal-box'>
                {offline ? (
                  <OfflinePortal
                    offlinePortalData={offline.offlinePortalData}
                  />
                ) : (
                  ''
                )}
              </div> */}
            </div>
          </BorderBox13>
        </RightBottomBox>
      </RightPage>
    );
  }
}



// const mapStateToProps = state => {
//   return {
//     browseCategories: state.rightPage.browseCategories,
//     userIdentityCategory: state.rightPage.userIdentityCategory,
//     offline: state.rightPage.offline,
//     userSitua: state.rightPage.userSitua,
//   };
// };

// const mapStateToDispatch = dispatch => ({});

export default index;
